@charset "utf-8";
		*{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
			font-family: -webkit-pictograph;
		}
		main{
			width: 100%;
			height: 600px;
			/*background: red;*/
			margin: 10px auto;
			position: relative;
			padding: 5px 0;
		}
		main .text{
			padding: 10px;
			text-align: center;
			/*font-size: 30px;*/
			color: #554;
		}
		.text h1{
			font-size: 50px;
		}
		.text p{
			width: 60%;
			padding: 5px;
			margin: auto;
			line-height: 30px;
		}
		main header{
			width: 98%;
			height: 60px;
			margin: 0 auto;
			/*background: gray;*/
			display: flex;
			align-items: center;
			padding: 20px;
			justify-content: space-between;
			border-bottom: 2px solid #ddd;
		}
		header p span{
			font-size: 40px;
		    margin: 0 5px;
		    cursor: pointer;
		    color: #555;
		     width: 30px;
		    height: 30px;
		    display: inline-block;
		    line-height: 19px;
		    text-align: center;
		    border-radius: 3px;
		}
		header p span:hover{
			background: #222;
    		color: white;
		}
		section{
			width: 98%;
			height: 600px;
			/*background: red;*/
			margin: auto;
			display: flex;
			align-items: center;
			overflow-x: auto;
		}
		section::-webkit-scrollbar{
			display: none;
		}
		section .product{
			min-width: 24%;
			height: 80%;
			background-image: linear-gradient(90deg, #0097b2, #7ed957);
			margin:  0 20px  0 0;
			border-radius: 20px;
			position: relative;
			left: 0;
			transition: 0.5s;

		}
		picture{
			width: 100%;
			height: 70%;
			padding: 20px;
			/*background: green;*/
			display: flex;
			overflow: hidden;
			margin-bottom: 20px;
		}
		picture img{
			width: 100%;
		}
		.detail,
		.button{
			width: 90%;
			/*background: red;*/
			margin: auto;
			padding: 5px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 50px;
			font-size: 20px;
			color: #444;
		}
		small{color: #555;}
		.main	a:hover{
			color: orange;
		}
	.main	a{
			text-decoration: none;
			padding: 6px 14px;
		    font-size: 15px;
		    margin: 5px 0 0 20px;
		    display: inline-block;
		    background:#0097b2;
		    color: white;
		}
		p.star{
			margin: 5px auto;
		    width: 65%;
		    font-size: 25px;
		    color:#ffd700;
		}
		@media (max-width: 768px) {
			
			header h1{
				font-size: 25px;
			}
			header p span{
				font-size: 30px;
			}
			section .product {
				min-width: 49%;
				margin:  0 10px  0 0;
			}
			.detail, .button{
				font-size: 16px;
			}
			a{
				padding: 6px 10px;
			}
		}
		
		@media (max-width: 376px) {
			
			header h1{
				font-size: 18px;
			}
			header p span{
				font-size: 30px;
			}
			section .product {
				min-width: 35%;
				margin:  0 10px  0 0;
			}
			.detail, .button{
				font-size: 12px;
			}
			a{
				padding: 6px 10px;
			}

			picture{
				width: 100%;
				height: 45%;
				padding: 5px;
				/*background: green;*/
				display: flex;
				overflow: hidden;
				margin-bottom: 20px;
			}

			p.star{
				display: block;
				margin-right: 28px;
				width:15%;
				font-size:14px;
				color: #fbde06;
			}

			.main	a{
				text-decoration: none;
				padding: 6px 14px;
				font-size: 15px;
				margin: 5px 0 0 10px;
				display: inline-block;
				background: #048ced;
				color: white;
			}

			main{
				width: 100%;
				height: 350px;
				/*background: red;*/
				margin: 5px auto;
				position: relative;
				padding: 5px 0;
			}
			
			section{
				width: 98%;
				height: 300px;
				/*background: red;*/
				margin: auto;
				display: flex;
				align-items: center;
				overflow-x: auto;
			}
		}

		

 /*carosul*/
 #carouselExampleFade{
    height:400px ;
  }
  #caroimg{
    height: 400px;
  }
  @media (max-width:768px){
    #carouselExampleFade{
    height:250px ;
  }
    #caroimg{
    height: 250px;
  }
  }
  @media (max-width:425px){
    #carouselExampleFade{
    height:160px ;
  }
#caroimg{
height: 160px;
}
}